<template>
	<div>
		<Header></Header>
		<ul class="advanced">
			<li>
				<div class="left">
					<img :src="require('../../assets/huo_meSon/1.jpg')" alt="" />
				</div>
				<div class="right">
					<h4>UI设计法则-名师直播课</h4>
					<p>有效期：2021-02-31</p>
					<div>
						<i></i>
						<a>开始学习</a>
					</div>
				</div>
			</li>
			<li>
				<div class="left">
					<img :src="require('../../assets/huo_meSon/1.jpg')" alt="" />
				</div>
				<div class="right">
					<h4>UI设计法则-名师直播课</h4>
					<p>有效期：2021-02-31</p>
					<div>
						<i></i>
						<a>开始学习</a>
					</div>
				</div>
			</li>
			<li>
				<div class="left">
					<img :src="require('../../assets/huo_meSon/1.jpg')" alt="" />
				</div>
				<div class="right">
					<h4>UI设计法则-名师直播课</h4>
					<p>有效期：2021-02-31</p>
					<div>
						<i></i>
						<a>开始学习</a>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
import Header from '../../components/Header'
export default {
	components: {
		Header,
	},
}
</script>

<style lang="scss" scoped>
.advanced {
	width: 100%;
	padding: 5px 0 15px;
	border-top: 1px solid #eee;
	li {
		width: 100%;
		height: 104px;
		box-sizing: border-box;
		padding: 10px 15px;
		display: flex;
		justify-content: space-between;
		& + li {
			border-top: 1px solid #eee;
		}
		.left {
			width: 147px;
			height: 100%;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.right {
			width: 183px;
			height: 100%;
			box-sizing: border-box;
			padding: 5px 0 0;
			h4 {
				font-weight: 400;
				font-size: 14px;
				font-size: #333;
				height: 24px;
				line-height: 24px;
			}
			p {
				height: 24px;
				line-height: 24px;
				font-size: 12px;
				color: #ddd;
			}
			div {
				height: 24px;
				display: flex;
				justify-content: space-between;

				i {
					display: block;
					width: 128px;
					height: 10px;
					border-radius: 5px;
					background: #e9ecf6;
					margin: 7px 0 0;
				}
				a {
					display: block;
					font-size: 12px;
					color: #333;
					line-height: 24px;
				}
			}
		}
	}
}
</style>